<template>
	<view class="cs">
		<view class="h">
			<image :src="info.coverImageUrl" mode="scaleToFill"></image>
		</view>
		<view class="t">
			<view :class='["item",active==1?"on":""]' @click="setActive(1)"><text>课程介绍</text></view>
			<view :class='["item",active==2?"on":""]' @click="setActive(2)"><text>课程目录</text></view>
		</view>
		<view class="c">
			<view v-if="active==1" class="cc" v-html="info.courseDetail"></view>
			<view v-if="active==2" class="cp">
				<view class="cp-1" v-for="(item,idx) in chapter" :key="`c_${item.courseChapterId}`">
					<view class="cp-1-t" @click="showLess(idx)">
						{{item.title}}
					</view>
					<view v-show="item.isShow" v-if="item.courseLessonList" class="cp-2-t" v-for="item2 in item.courseLessonList" :key="`l_${item2.courseLessonId}`">
						{{item2.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="b">
			<view class="l">
				<view class="pic">
					<text class="pf">￥</text>
					<text class="pp">{{info.payPrice}}</text>
				</view>
				<view class="lp_t">
					<view class="lp_t_1">
						限时优惠名额有限
					</view>
					<view class="lp_t_2">
						赶紧点击购买吧
					</view>
				</view>
			</view>
			<view class="r" @click="pay">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	const jWeixin = require('jweixin-module')
	import {getCourseDes,getCourseChapter,createOrder,getCourseShare,payOrder} from '@/api/contract.js'
	import {isWeChatBrowser,isWeChatMiniProgram} from '@/utils/platform.js'
	import {wxPay} from '@/utils/wx.js'
	export default {
		data(){
			return { 
				active:1,
				code:'',
				payCode:'',//支付code
				info:{},
				chapter:[],
				isDebug:false
			}
		},
		methods:{
			showLess(idx){
				this.chapter[idx]['isShow']=!this.chapter[idx]['isShow']
				this.chapter=[...this.chapter]
			},
			setActive(v){
				this.active=v;
			},
			async getCourse(){
				const res=await getCourseDes(this.code)
				this.info=res.data;
				this.getShare()
			},
			async getChapter(){
				const res=await getCourseChapter(this.code)
				this.chapter=res.data;
			},
			async pay(){
				const _this=this;
				let payRes=null;
				//如果分期支付，后台已经创建好订单，用户无需再创建订单
				try{
					if(_this.payCode){
						payRes= await payOrder({
							provider:'WECHAT',
							paymentCode:_this.payCode,
							tradeType:'JSAPI'
						})
					}else{
						const res=await createOrder({
							"courseCode":_this.code,
							"quantity":1,
						})
						payRes= await payOrder({
							provider:'WECHAT',
							orderSn:res.data.orderSn,
							tradeType:'JSAPI'
						})
					}
				}catch(err){
					console.log(err)
				}
				
				if(!_this.isDebug){
					if(isWeChatBrowser()){
						wxPay(payRes?.data?.prepayParams,(cRes)=>{
							console.log(cRes)
						})
					}else{
						window.location.href=payRes?.data?.payUrl;
					}
					
				}
			},
			async getShare(){
				const _this=this;
				if(isWeChatBrowser()){
					const res =await getCourseShare(this.code)
					const shareInfo={ 
						title: res.data.shareTitle||_this.info?.courseName, // 分享标题
						desc: res.data.shareInfo||_this.info?.description, // 分享描述
						link: res.data.shareUrl||window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的服务号JS安全域名一致
						imgUrl: res.data.shareCover||_this.info?.coverImageUrl, // 分享图标
						success: function () {
						  // 设置成功
						}
					}
					jWeixin.ready(function () {   //需在用户可能点击分享按钮前就先调用
						jWeixin.updateAppMessageShareData(shareInfo)
						jWeixin.updateTimelineShareData(shareInfo)
					});
				}
				
			}
		},
		mounted() {
			let query = new URLSearchParams(window.location.search);
			//课程code
			let code = query.get('q');
			//分期支付的code
			const pCode=query.get('p')
			this.isDebug=query.get('d')==1?true:false
			if(code){
				this.code=code;
				if(pCode){
					this.payCode=pCode;
				}
				//todo 需要处理，如果非微信内，需要扫码登录
				this.getCourse()
				this.getChapter()
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.cs{
		height: auto;
		overflow: hidden;
		padding-bottom: 90rpx;
		.h{
			height: 350rpx;
			image{
				width: 100%;
				height: 100%;
				vertical-align: top;
			}
		}
		.t{
			height: 62rpx;
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;
			.item{
				flex: 1;
				font-size: 32rpx;
				line-height: 60rpx;
				text-align: center;
				text{
					border-bottom: 2px solid #fff;
					display: inline-block;
				}
				&.on{
					text{
						border-color: #ff0000;
					}
				}
			}
		}
		.c {
		    max-width: 100%;
			margin-top: 20rpx;
			.cc{
				/* 深度选择器确保样式能应用到v-html内容 */
				:deep(img) {
					width: 100% !important;
					height: auto !important;
					display: block !important;
					max-width: 100% !important;
				}
				:deep(p) {
					text-align: justify;
					margin: 0;
					padding: 0;
					margin-bottom: 0 !important;
					:deep(img) {
						width: 100% !important;
						height: auto !important;
					}
				}
			}
		    .cp{
				height: auto;
				overflow: hidden;
				border-top: 1px solid #ccc;
				padding: 0 30rpx;
				.cp-1{
					height: auto;
					overflow: hidden;
					border-bottom: 1px solid #ccc;
					.cp-1-t{
						height: auto;
						overflow: hidden;
						font-size: 30rpx;
						color: #333;
						line-height: 80rpx;
						background: url(@/static/img/arrow.png) no-repeat left center;
						background-size: 30rpx 30rpx;
						padding-left: 30rpx;
					}
					.cp-2-t{
						height: auto;
						overflow: hidden;
						font-size: 28rpx;
						color: #555;
						line-height: 60rpx;
						border-bottom: 1px solid #ccc;
						margin-left: 60rpx;
						&:last-child{
							border: 0;
						}
					}
				}
				
			}
		}
		.b{
			height: 90rpx;
			overflow: hidden;
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			flex-direction: row;
			background: #fff;
			.l{
				height: auto;
				flex: 1;
				display: flex;
				flex-direction: row;
				.pic{
					width: 280rpx;
					text-align: center;
					color: red;
					font-weight: bold;
					line-height: 90rpx;
					.pf{
						font-size: 36rpx;
						line-height: 60rpx;
						margin-top: 20rpx;
						vertical-align: top;
						display: inline-block;
					}
					.pp{
						font-size: 60rpx;
						vertical-align: top;
						display: inline-block;
					}
				}
				.lp_t{
					flex: 1;
					font-size: 24rpx;
					line-height: 32rpx;
					.lp_t_1{
						color: #777;
						margin-top: 15rpx;
					}
					.lp_t_2{
						color: #444;
					}
				}
			}
			.r{
				height: auto;
				background: #ff0000;
				color: #fff;
				width: 220rpx;
				text-align: center;
				font-size: 36rpx;
				line-height: 90rpx;
			}
		}
	}
</style>